<template>
    <el-collapse class="collapse-container">
        <el-collapse-item v-for="(item, index) in collapse" :key="index" :title="item.title" :name="item.name">
            <component :is="item.cmp" :bpmnElement="bpmnElement" ref="propertiesCmp"></component>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
    import UserTaskHOC from "./userTaskComponents/UserTaskHOC.js";
    import ServiceTaskGeneral from "./serviceTaskComponents/ServiceTask_General";

    export default {
        name: "Properties_ServiceTask",
        data() {
            return {
                bpmnElement: null,
                collapse: {
                    general: {
                        title: "通用项",
                        name: 1,
                        cmp: UserTaskHOC(ServiceTaskGeneral)
                    },
                },
            }
        }
    }
</script>

<style scoped lang="scss">
    .collapse-container {
        :deep(.el-collapse-item) {
            margin-bottom: 6px;

            .el-collapse-item__header {
                font-size: 16px;
                font-weight: bold;
                padding-left: 5px;
                background: #eee;
            }

            .el-collapse-item__wrap {
                background: transparent;

                .el-collapse-item__content {
                    padding-bottom: 0;
                    margin-top: 10px;
                }
            }
        }
    }
</style>